import React, { useState } from "react";
import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
import { ProCard } from "@ant-design/pro-components";
import RcResizeObserver from "rc-resize-observer";
import { Statistic } from "antd";
import moment from "moment";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next
import style from "./homepage.module.scss";

export default function HomePage() {
  const { t, i18n } = useTranslation(); // 结构拿出方法
  const [responsive, setResponsive] = useState(false);

  const data = moment().format("YYYY-MM-DD ");
  const titleDom = () => {
    return <span style={{ fontSize: "16px" }}>日期：{data}</span>;
  };

  // console.log(data);

  return (
    <div className={style.homepageboss}>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <ProCard
          style={{ height: "100%" }}
          // title="数据概括"
          title={t("homepage.Datasummary")}
          extra={titleDom()}
          bordered
          headerBordered
          split={responsive ? "horizontal" : "vertical"}
        >
          <ProCard split="horizontal">
            <ProCard split="horizontal">
              <ProCard split={responsive ? "horizontal" : "vertical"}>
                <ProCard title={t("homepage.NumberOfSubAccounts")}>
                  <Statistic
                    value={79.0}
                    precision={2}
                    valueStyle={{
                      color: "#cf1322",
                    }}
                    prefix={<ArrowDownOutlined />}
                  />
                </ProCard>
                <ProCard title={t("homepage.TotalTransactions")}>
                  <Statistic
                    valueStyle={{
                      color: "#3f8600",
                    }}
                    prefix={<ArrowUpOutlined />}
                    value={112893.0}
                    precision={2}
                  />
                </ProCard>
                <ProCard title={t("homepage.AccumulatedAmount")}>
                  <Statistic
                    valueStyle={{
                      color: "#3f8600",
                    }}
                    prefix={<ArrowUpOutlined />}
                    value={112893.0}
                    precision={2}
                  />
                </ProCard>
              </ProCard>
              {/* <ProCard split="vertical">
                <ProCard title="运行中试验">12/56</ProCard>
                <ProCard title="历史试验总数">134 个</ProCard>
              </ProCard> */}
            </ProCard>
            <ProCard title={t("homepage.FlowTrend")}>
              {/* <div>图表</div>
              <div>图表</div>
              <div>图表</div>
              <div>图表</div>
              <div>图表</div> */}
            </ProCard>
          </ProCard>
          <ProCard title={t("homepage.TrafficOccupancy")}>右侧内容</ProCard>
        </ProCard>
      </RcResizeObserver>
    </div>
  );
}
